<style lang="less" scoped>
.invoice{
  .invoice-item, .invoice-item-add{
    position: relative;
    border-radius: 0;
    background-color: #fff;
    box-shadow: none;
    min-height: 150px;

    .sanjiao{
      cursor: pointer;
      height: 0;
      width: 0;
      border-top: 50px solid #37CA73;
      border-left: 50px solid transparent;
      position: absolute;
      top: -1px;
      right: -1px;
      .default{
        margin-left: -25px;
        margin-top: -45px;
        font-size: 20px;
        color: #fff;
      }
    }
  }

  .invoice-item-add{
    padding-top: 40px;
    a, a:hover, a:focus, a:active{
      color: #969696;
      text-decoration: none;
    }
  }

  .invoice-div{
    cursor: pointer;
    .opacity{
      display: none;
      position: absolute;
      top: 0;
      left: 15px;
      width: 89.5%;
      height: 150px;
      background-color: rgba(0,0,0,0.7);
      z-index: 10;
      text-align: center;
      padding-top: 20%;
      a, a:hover, a:focus, a:active{
        color: #fff;
        text-decoration: none;
        margin: 10px;
      }
    }
    &:hover{
      .opacity{
        display: inherit;
      }
    }
  }
}

.type-btns{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  .type-btn{
    padding: 10px 30px;
    background-color: #fff;
    color: #333;
    border: 1px solid #d5d5d5;
    cursor: pointer;
    &:first-child{
      margin-right: 30px;
    }

    &.active, &:hover{
      color: #fff;
      background-color: #37CA73;
      border-color: #37CA73;
    }
  }
}
.form-content{
  .col-xs-offset-2.col-xs-8 {
    margin-bottom: 20px;
  }
}
</style>

<template>
<div id="invoice" class="row invoice">
  <div class="col-xs-3 invoice-div" v-for="invoice in invoices">
    <div class="opacity">
      <a href="javascript:void(0)" v-if="!invoice.is_default" @click="setDafult(invoice.id)">
        <i class="fa fa-check"></i>
        设为默认
      </a>
      <a href="javascript:void(0)" @click="deleteInvoice(invoice.id)">
        <i class="fa fa-remove"></i>
        删除
      </a>
    </div>
    <div class="well invoice-item">
      <h5>发票类型：{{invoiceType(invoice.data_type)}}</h5>
      <h5>发票抬头：{{invoice.title}}</h5>
      <h5>发票内容：{{invoice.content}}</h5>
      <div class="sanjiao" v-if="invoice.is_default">
        <p class="default">
          <i class="fa fa-check"></i>
        </p>
      </div>
    </div>
  </div>

  <div class="col-xs-3 invoice-div" v-if="needAddBtn">
    <div class="well invoice-item-add text-center">
      <a href="javascript:void(0)" @click="addInvoice()">
        <i class="fa fa-plus-square-o fa-3x"></i>
        <h5>
          新建发票信息
        </h5>
      </a>
    </div>
  </div>

  <!-- add添加内容 -->
  <modal v-model="modal.visible" :ok-text="modal.okText" :title="modal.title" @modal-ok-event="addInvoiceSubmit">
    <form>
      <div class="row type-btns">
        <div :class="['type-btn', {'active': !isActiveType}]" @click="changeActiveType(false)">普通发票</div>
        <div :class="['type-btn', {'active': isActiveType}]" @click="changeActiveType(true)">增值税发票</div>
      </div>
      <hr>
      <div class="row form-content" v-if="!isActiveType">
        <div class="form-group">
          <div class="col-xs-offset-2 col-xs-8">
            <label for="contact_name">发票抬头</label>
            <input type="text" class="form-control private-input" id="title" v-model="newInvoice.title">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-2 col-xs-8">
            <label for="contact_name">发票内容</label>
            <input type="text" class="form-control private-input" id="content" v-model="newInvoice.content">
          </div>
        </div>
      </div>

      <div class="row form-content" v-if="isActiveType">
        <div class="form-group">
          <div class="col-xs-offset-2 col-xs-8">
            <label for="contact_name">单位名称</label>
            <input type="text" class="form-control private-input" id="title" v-model="newInvoice.company_title">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-2 col-xs-8">
            <label for="contact_name">注册地址</label>
            <input type="text" class="form-control private-input" id="address" v-model="newInvoice.address">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-2 col-xs-8">
            <label for="contact_name">注册电话</label>
            <input type="text" class="form-control private-input" id="phone" v-model="newInvoice.phone">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-2 col-xs-8">
            <label for="contact_name">纳税人识别码</label>
            <input type="text" class="form-control private-input" id="code" v-model="newInvoice.code">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-2 col-xs-8">
            <label for="contact_name">开户银行</label>
            <input type="text" class="form-control private-input" id="bank" v-model="newInvoice.bank">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-2 col-xs-8">
            <label for="contact_name">银行账户</label>
            <input type="text" class="form-control private-input" id="bank_account" v-model="newInvoice.bank_account">
          </div>
        </div>
      </div>
    </form>
  </modal>
</div>

</template>

<script>
import Query from '../query'
import Modal from './modal.vue'
import SuccessDialog from 'success_alert'
import ErrorDialog from 'error_alert'

export default {
    name: "invoice",
    components: {
      'modal': Modal,
    },
    data: function data() {
        return {
            invoices: [],
            defaultId: null,
            newInvoice: {
              title: '',
              type: 0,
              content: '',
              address: '',
              phone: '',
              code: '',
              company_title: ''
            },
            modal: {
                title: "添加新发票",
                content: "",
                visible: false,
                okText: "确认添加"
            },
            isActiveType: false
        }
    },
    mounted: function mounted() {
      this.initInvoices()
      // this.setInputValue(this.defaultId)
    },
    updated: function updated() {
      // this.setInputValue(this.defaultId)
    },
    computed: {
      needAddBtn: function() {
        return this.invoices.length < 5
      }
    },
    methods: {
      // // 初始化
      async initInvoices() {
        var _this = this
        Query.get('/dashboard/invoices').then((data) => {
          if (data.status === 'ok') {
            _this.invoices = data.invoices
            _this.defaultId = data.defaultId
            _this.setInputValue(_this.defaultId)
          } else {
            ErrorDialog.show('网络问题，请刷新页面！')
          }
        })
      },

      invoiceType: function(dataType) {
        if (dataType === 'normal') {
          return '普通发票'
        } else if (dataType === 'company') {
          return '增值税发票'
        }
      },

      // 修改发票类型
      changeActiveType: function(active) {
        this.isActiveType = active
        if (active) {
          this.newInvoice.type = 1
        } else {
          this.newInvoice.type = 0
        }
      },

      // 弹出modal
      addInvoice: function() {
        this.modal.visible = true;
      },

      // 设置默认
      setDafult: function(id) {
        var _this = this
        Query.put('/dashboard/invoices/'+ id +'/set_default_invoice').then((data) => {
          if (data.status === 'ok') {
            _this.invoices = data.invoices
            _this.defaultId = data.defaultId
            _this.setInputValue(_this.defaultId)
          } else {
            ErrorDialog.show('网络问题，请刷新页面！')
          }
        }).catch((error) => {
          ErrorDialog.show('网络问题，请刷新页面！')
        })
      },

      // 删除发票
      deleteInvoice: function(id) {
        var result = confirm('您确定删除？')
        var _this = this
        if (result) {
          Query.delete('/dashboard/invoices/' + id).then((data) => {
            if (data.status === 'ok') {
              _this.invoices = data.invoices
            } else {
              ErrorDialog.show('网络问题，请刷新页面！')
            }
          }).catch((error) => {
            ErrorDialog.show('网络问题，请刷新页面！')
          })
        }
      },

      // 设置默认的发票id
      setInputValue: function(defaultId) {
        if (defaultId) {
          $('#input_invoice_id').val(defaultId)
        } else {
            console.log('----------------发票id初始化失败------------------')
        }
      },

      // 添加发票
      addInvoiceSubmit: function() {
        var _this = this
        if (_this.newInvoice.type === 0) {
          let apiInvoice = {}
          if (_this.newInvoice.title.length > 0 && _this.newInvoice.content.length > 0) {
              apiInvoice = {
                data_type: _this.newInvoice.type,
                title: _this.newInvoice.title,
                content: _this.newInvoice.content
              }

              Query.post('/dashboard/invoices', {invoice: apiInvoice}).then((data) => {
                if (data.status === 'ok') {
                    _this.invoices = data.invoices
                    _this.defaultId = data.defaultId
                    _this.setInputValue(_this.defaultId)
                } else {
                  ErrorDialog.show(data.msg)
                }
              }).catch((error) => {
                  ErrorDialog.show(error)
              })
          } else {
              ErrorDialog.show('请填写发票抬头跟发票内容')
          }
        } else {
          let apiInvoice = {}
          if(
            _this.newInvoice.company_title.length > 0 &&
            _this.newInvoice.address.length > 0 &&
            _this.newInvoice.phone.length > 0 &&
            _this.newInvoice.code.length > 0 &&
            _this.newInvoice.bank.length > 0 &&
            _this.newInvoice.bank_account.length > 0
          ) {
            apiInvoice = {
              data_type: _this.newInvoice.type,
              title: _this.newInvoice.company_title,
              address: _this.newInvoice.address,
              phone: _this.newInvoice.phone,
              code: _this.newInvoice.code,
              bank: _this.newInvoice.bank,
              bank_account: _this.newInvoice.bank_account
            }
            Query.post('/dashboard/invoices', {invoice: apiInvoice}).then((data) => {
              if (data.status === 'ok') {
                  _this.invoices = data.invoices
                  _this.defaultId = data.defaultId
                  _this.setInputValue(_this.defaultId)
              } else {
                ErrorDialog.show(data.msg)
              }
            }).catch((error) => {
                ErrorDialog.show(error)
            })
          } else {
            ErrorDialog.show('请填写内容')
          }
        }
      }
    }
}

</script>
